<template>
	<div class="add-jq-dialog">
		<!--添加集群-->
		
		
		<appdialog 
			ref="dialog"
			:visible="false" 
			title="添加集群"
			@confirm="confirmAdd"
			@cancle="cancleAdd"
			width="30%"
			>
			
			<el-form 
				ref="addForm" 
				:rules="rules" 
				:model="addForm"
				label-width="110px"
				
				>
			
				<el-form-item label="类型：" prop="clusterType">
					<!--选择环境-->
					<huanjingStatusSelect
						@change="changeHJ"
						ref="huanjingStatusSelect"
						></huanjingStatusSelect>
				</el-form-item>
				
				<el-form-item label="名称：" prop="clusterName">
					<nameInput @change="changeName" ref="nameInput"
						></nameInput>
				</el-form-item>
				
				<el-form-item label="备注：" prop="description">
					<appTextarea @change="changeDESC" ref="appTextarea"></appTextarea>
				</el-form-item>
				
			</el-form>
			
		</appdialog>
		
		
		
	</div>
</template>

<script>

import appdialog from "@/view/components/dialog/dialog";
import huanjingStatusSelect from "@/view/components/select/huanjingStatusSelect";
import nameInput from "@/view/components/input/nameInput";
import appTextarea from "@/view/components/textarea/textArea";
import {save} from "@/service/swagger/ResourceClusterController"
import {validateNumAndEn} from "@/utils/validate"

export default {
	name: "addJQDialog",
	components: {
		appdialog,
		huanjingStatusSelect,
		nameInput,
		appTextarea
	},
	data() {
    return {
      addForm : {
      	clusterType : "",
				clusterName : "",
				description : '',
      },
      rules : {
      	clusterType: [
          { required: true, message: '请选择集群类型', trigger: 'change' },
        ],
      	clusterName: [
          { required: true, message: '请输入集群名称', trigger: 'blur' },
          { validator : (rule,value,callback)=>{
          	if(!validateNumAndEn(value)){
          		callback(new Error("请输入英文和数字"))
          	}else{
          		callback()
          	}
          	
          	}, trigger: 'blur' },
          
        ],
      }
    }
  },
  mounted() {
  	
  },
	methods:{
		// 表单重置
		initFrom(){
			setTimeout(()=>{
				console.log(6666, this.$refs)
				for(let i in this.$refs){
					let ref = this.$refs[i]
					if(ref.reset){
						ref.reset();
					}
				}
			},90)
		},
		close(){
			this.initFrom();
			this.$refs.dialog.close();
			this.$refs.addForm.clearValidate();
		},
   	open(){
   		this.$refs.dialog.open();
   		setTimeout(()=>{
   			this.$refs.addForm.clearValidate();
   		},100)
   	},
   	confirmAdd(){
   		console.log("确认添加" , this.addForm )
   		
   		// 验证表单
   		this.$refs.addForm.validate((valid) => {
        if (valid) {
        	// 验证通过
          this.submitAdd();
        } else {
        	setTimeout(()=>{
        		this.open();
        	},50)
          
          return false;
        }
      });
   		// 
		 },
		//  表单重置
		resetFrom(){
			  // let refsobj = {jqname:'jqname',desc:'desc'}
        // for(let key in this.$refs){
				// 	if(refsobj[key]){
				// 		console.log(key)
        //     this.$refs.key.reset()
				// 	}
				// }
		},
   	submitAdd(){
   		save({...this.addForm}).then(ret=>{
				 if(ret&&ret.code == 0){
					 	this.$message({message: '创建成功',type: 'success',duration : 2000,});
						this.close()
						this.$emit("addSucess")
				 }else{
					  this.close()
				 }
   		})
   	},
   	cancleAdd(){
   		this.close()
   	},
   	
   	changeHJ(name,v){
   		console.log("环境选项改变：",name,v)
   		this.addForm.clusterType = v ;
   	},
   	changeName(name,v){
   		console.log("name改变：",name,v)
   		this.addForm.clusterName = v ;
   	},
   	changeDESC(name,v){
   		console.log("备注改变：",name,v)
   		this.addForm.description = v ;
   	}
   	
   	
	}
}
</script>

<style scoped lang="scss">
@import "../../../styles/variables.scss";


</style>